{% load html_formatters circle_ranges humanize math_operations %}

{% if comments %}
<h4>Комментарии</h4>
{% endif %}
<div class="list-group">

    {% for comment in comments %}
        <a class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
          <div>
              {# Генерация аватарки комментатора по его username #}
            <img src="https://ui-avatars.com/api/?size=48&name={{ comment.user.username }}&font-size=0.33&background=random&rounded=true&format=svg"
                 class="center-block" alt="{{ comment.user.username }}">
          </div>
          <div class="d-flex gap-2 w-100 justify-content-between">

            {# Комментатор и его оценка #}
            <div>
              <h5 class="mb-0 opacity-75" style="position: relative;top: 9px;">
                {{ comment.user.username }}
                <span class="me-3"></span>

                {# Кол-во поставленных звезд #}
                {% for i in comment.rating|to_range %}
                    <span class="star pe-4 px-1" style="background-size: 100%;"></span>
                {% endfor %}

                {# Кол-во недостающих звезд до 5 #}
                {% for i in comment.rating|mul:"-1"|sub:"-5"|to_range %}
                    <span class="empty-star pe-4 px-1" style="background-size: 100%;"></span>
                {% endfor %}

              </h5>

                <div>

                </div>

                <br>

                {# Комментарий #}
              <p class="mb-0">{{ comment.text | format_links_blank | linebreaksbr }}</p>
            </div>
            {# Дата и время комментария #}
            <small class="opacity-50 text-nowrap">{{ comment.created | naturaltime }}</small>
          </div>
        </a>

    {% empty %}

        <h6 style="text-align: center">У этой книги пока нет комментариев</h6>

    {% endfor %}

</div>